<template>
    <div id="convertibleTime">
        <div class="title">
            <h1>兑换时长参数设置</h1>
        </div>
        <div class="conversionBox">
            <el-form ref="conversionData" :model="conversionData" label-width="80px" :rules="rules" class="demo-ruleForm">
                <el-form-item label="当前设置:"  label-width="100px">
                  
                </el-form-item>
                <el-form-item  label-width="40px">
                    <span style="font-weight: bolder;">{{this.oldTimeHours}}</span>
                    <span>&nbsp;小时学习时长，兑换一小时单人卡券</span>
                </el-form-item>
                <el-form-item label="修改为:"  label-width="85px">
                   
                </el-form-item>
                <el-form-item  class="newHoursBox"  prop="newTimeHours" >
                    <el-input v-model.number="conversionData.newTimeHours" style="width: 90px;" size="small" clearable></el-input>
                    <span style="margin-left: 8px;">小时学习时长，兑换一小时单人卡券</span>
                </el-form-item>
                <el-form-item class="btnClass">
                    <el-button type="primary" @click="sureChange('conversionData')" style="width: 330px; margin: 0;" >确认修改</el-button>
                </el-form-item>

            </el-form>
        </div>
        
    </div>
</template>


<script>
export default{
    data(){
        return{
            oldTimeHours:'',
            conversionData:{
                newTimeHours:''
            },
            rules: {
                newTimeHours: [
                    { required: true, message: '时长不能为空！', },
                    { type: 'number', message: '时长类型为数字！'}
                ],
            }
        }
    },
    methods:{
        getTimeData:function(){
            this.$axios({
                    url: "/duration/query",
                    method: "get",
                }).then((res) => {
                    if (res.data.code == 0) {
                        this.oldTimeHours = res.data.data[0].redemptionDuration
                    } else {
                        this.$message({
                            type: "info",
                            message: "兑换时长时间查询失败，请重新操作.",
                        });
                    }
                })
        },
        sureChange(ruleName){
              this.$refs[ruleName].validate((valid) => {
                if (valid) {
                    this.$confirm("此操作将修改兑换时长, 是否继续?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }).then(() => {
                        this.$axios({
                            url: "/duration/update",
                            method: "put",
                            params:{
                                redemptionDuration:this.conversionData.newTimeHours
                            }
                        }).then((res) => {
                            if (res.data.code == 0) {
                                this.$message({
                                    type: "success",
                                    message: "兑换时长时间----修改成功.",
                                });
                                this.getTimeData()
                            } else {
                                this.$message({
                                    type: "info",
                                    message: "兑换时长时间修改失败，请重新操作.",
                                });
                            }
                        });
                    }).catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消兑换时长的修改操作!!!",
                        });
                    });
                } else {
                    console.log('修改的时长不能空哦！');
                    return false;
                }
            });
        }
    },
    mounted(){
        this.getTimeData()
    }
}
</script>

<style scoped lang="less">
#convertibleTime{
    
    & .title {
        text-align: left;
        line-height: 0;
  }
  .conversionBox{
    line-height: 0;
    width: 450px;
    height: 300px;
    // outline: 1px solid red;
    margin-top: 50px;
    background: #f2f2f2;
    padding: 10px;
  }
   /deep/ .el-form-item__label {
        /* text-align: right; */
        vertical-align: middle;
        font-size: 16px;
        color: #333333;
        line-height: 40px;
        padding:0;
    }
    .el-form-item{
            margin: 10px 0;
        }
    .newHoursBox{
        position: relative;
        padding: 0;
        left: -70px;
    }
    .btnClass button{
        position: relative;
        top: 20px;
        left: -68px;
    }
    /deep/.el-form-item__error {
    color: #F56C6C;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
    top: 100%;
    left: 5px;
}
}
</style>